import React,{ Component} from "react";
import {toJS} from 'mobx';
import { Icon,List} from "weaver-mobile";

export default class AddInvoice extends Component{
  
	render(){
		const { invoiceList,wfClick,deleteInvoice,currentInvoiceOcClick } = this.props;

		return (
			<div className="fna-addIncoice-c" >
                {invoiceList.map((items,index) =>{
                    let comment = [];
                    items.data[0].map(item =>{
                        const {fieldDBName,name,value,wfData} = item;
                        let comment_item = [];
                        if(fieldDBName == 'invoicetype'){
                            comment_item=<div className={'typeCss'}>
                                            <List.Item  extra={<Icon type={'delete'} size='xxs' onClick={(e)=>{deleteInvoice(items.id,e)}}/>}>
                                                {value}<Icon type={'sweep'} size='xxs' color={'#55b1f9'}/>
                                            </List.Item>
                                        </div>
                        }else if(fieldDBName == 'requestId'){
                            comment_item = <div>
                                <List.Item>{name}</List.Item>
                                {wfData && wfData.map(item =>{
                                    return (
                                        <List.Item onClick={()=>{wfClick(item.requestId)}}>{item.value}</List.Item>
                                    )
                                })}
                                {invoiceList.length-1 != index && <img src={'/images/fna/fnaMobile/split-line-03.png'} width="100%"/>}
                            </div>
                        } else {
                            comment_item = <div><List.Item  extra={value}>{name}</List.Item></div>
                        }
                        return comment.push(<div key={fieldDBName} onClick={(e)=>{currentInvoiceOcClick(items.id,items.cloudId)}}>{comment_item}</div>)
                    })
                    

                    return comment;
                   
                })}
			</div>
		)
		
	}
}